<template>
  <div class="index-container">
    <div class="box">
      <div class="index-header">
        <div class="left">
          <div class="name text">{{ header?.data.restaurantName }}</div>
          <div class="address text">{{ header?.data.restaurantAddress }}</div>
        </div>
        <div class="right">
          <IconFont name="star-fill-n" color="#ff471f"></IconFont>
        </div>

      </div>
      <div class="index-content">
        <div class="left">
          <div class="item" v-for="(item, index) in header?.data.categoryList"
            :class="{ active: selectedTabs === index }" @click="changeLeftTabs(item, index)" :key="item.categoryId">
            <div class="img">
              <img :src="item.categoryImg" style="width: 35px;height: 35px;" alt="">
            </div>
            <div class="name">{{ item.categoryName }}</div>

          </div>
        </div>
        <div class="right" ref="rightContent" @scroll="handleRightScroll">
          <div v-for="(item, index) in header?.data.categoryList" :key="item.categoryId" class="category-section"
            :data-index="index">
            <div class="categoryName">{{ item.categoryName }}</div>
            <div v-for="(product, pIndex) in item.productList" :key="product.productId" class="item">
              <div class="img">
                <img :src="product.productImg" style="width: 100%;height: 100%;border-radius: 15px;" alt="">
              </div>
              <div class="right-content">
                <div class="name text">{{ product.productName }}</div>
                <div class="tags">
                  已优惠{{ (Number(product.productPrice) - Number(product.userPrice)).toFixed(2) }}
                </div>
                <div class="price-text">
                  <div class="left-price">
                    <div class="origin-price">￥{{ product.productPrice.toFixed(2) }}</div>
                    <div> <nut-price :price="product.userPrice" size="normal" /></div>
                  </div>
                  <div class="right-plus">
                    <div class="icon-plus" @click="onClickPlus">
                      <IconFont font-class-name="iconfont" class-prefix="icon" name="jia" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { IconFont } from '@nutui/icons-vue-taro'
import { storeToRefs } from 'pinia'
import { useUserStore } from '../../store/index'
import header from "../../utils/list"
import { ref } from 'vue'
const show = ref(false)
const { number } = storeToRefs(useUserStore())
const onClick = () => {
  show.value = true
  // // console.log('点击了')
}
const rightContent = ref(null)
const selectedTabs = ref(0)
const changeLeftTabs = (item, index) => {
  selectedTabs.value = index
  // 滚动到对应分类
  scrollToCategory(index)
}

// 滚动到对应分类
const scrollToCategory = (index) => {
  const sections = rightContent.value.querySelectorAll('.category-section')
  if (sections[index]) {
    console.log(sections[index].offsetTop);
    const top = sections[index].offsetTop - 100
    rightContent.value.scrollTo({
      top,
      behavior: 'smooth'
    })
  }
}

// 处理右侧滚动事件
const handleRightScroll = () => {
  const scrollTop = rightContent.value.scrollTop
  const sections = rightContent.value.querySelectorAll('.category-section')

  for (let i = 0; i < sections.length; i++) {
    const section = sections[i]
    if (section.offsetTop <= scrollTop + 100) { // 50是容差值
      selectedTabs.value = i
    } else if (section.offsetTop > scrollTop) {
      // 如果已经滚过当前section，且下一个section还未到达，则保持当前选中
      break
    }
  }
}
const onClickPlus=()=>{
  
}



</script>
<style lang="less">
.index-container {
  height: 100vh;

  .box {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    height: 100%;

    .index-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30px 20px;
      background-color: #fff;
      border-radius: 10px;
      margin-top: 20px;


      .left {
        flex: 1;

        .text {

          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          text-overflow: ellipsis;
          overflow: hidden;

        }

        .name {
          color: #000;
          font-weight: 500;
          font-size: 26px;

        }

        .address {
          font-size: 20px;
          color: #9f9f9f;

        }
      }

      .right {
        margin-left: 5px;
        width: 80px
      }
    }

    .index-content {
      flex: 1;
      background-color: #fff;
      margin: 20px 0;
      display: flex;
      align-items: center;
      border-radius: 20px;
      overflow: hidden;

      .left {
        flex: 1;
        background-color: #ffeeb4;
        height: 100%;
        overflow-y: auto;
        // padding: 20px 0;

        .item {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 10px 0;
          transition: all .3s;

          .img {}

          .name {
            font-size: 20px;
          }

          &:nth-child(n+2) {
            margin-top: 20px;
          }
        }

        .active {
          background-color: #fff;
          color: red;
          border-bottom-left-radius: 20px;
          border-top-left-radius: 20px;
          transition: all .3s;
        }
      }

      .right {
        flex: 4;
        background-color: #fff;
        height: 100%;
        margin-left: 15px;
        overflow-y: auto;

        .category-section {
          margin-bottom: 30px;
        }

        .categoryName {
          font-size: 24px;
          color: #999;
        }

        .item {
          display: flex;
          // align-items: center;
          padding: 10px;

          .img {
            width: 200px;
            height: 200px;

          }

          .right-content {
            flex: 1;
            margin-left: 15px;
            margin-top: 25px;

            .name {
              font-size: 26px;
              color: #000;
              font-weight: 500;
            }

            .text {

              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              text-overflow: ellipsis;
              overflow: hidden;

            }

            .tags {
              margin-top: 5px;
              padding: 5px;
              font-size: 18px;
              border: 1px solid #ff471f;
              border-radius: 10px;
              width: 100px;
              color: red;
            }

            .price-text {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 0 10px;

              .left-price {
                padding: 0;

                .origin-price {
                  margin-top: 10px;
                  text-decoration: line-through;
                  color: #9f9f9f;
                  font-size: 20px;
                }
              }

              .right-plus {
                .icon-plus {
                  padding-right: 20px;
                  color: #ff471f;

                }

              }
            }

          }
        }
      }


    }
  }


}
</style>
